<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
	
		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">
			body {
				font-size: 24px;
				padding: 15px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

			p {
				margin: 30px 10px;
			}

			#link01 {
				/* Style */
			}

			#container {
				max-width: 640px;
			}
		</style>
		
	</head>

	<body>
			
		<div id="container" class="ui-helper-clearfix">

			<img id="image01" src="images/image01.png" />

			<br /><br />

			<img id="image02" src="images/image01.png" />

			<br /><br />

			<div style="display:none;" id="description">
				Lorem <strong>ipsum dolor</strong> sit amet, <em style="color: red;">consectetur</em> adipisicing elit, sed do <em><strong>eiusmod tempor</strong></em> incididunt ut labore et dolore magna aliqua.
				Lorem <strong>ipsum dolor</strong> sit amet, <em style="color: red;">consectetur</em> adipisicing elit, sed do <em><strong>eiusmod tempor</strong></em> incididunt ut labore et dolore magna aliqua.
				Lorem <strong>ipsum dolor</strong> sit amet, <em style="color: red;">consectetur</em> adipisicing elit, sed do <em><strong>eiusmod tempor</strong></em> incididunt ut labore et dolore magna aliqua.
			</div>

		</div>

		<script type="text/javascript" charset="utf-8">
		
			var init = function() {
			
				window.image1 = new Nokia.ImageDescription({
					element: '#image01',
					description: jQuery('#description').html(),
					maxLines: 4,
					applyRoundedCorners: false,
					create: function() {
						console.log("Image Description: Create");
					},
					toggle: function() {
						console.log("Image Description: Toggle");
					}
				});

				window.image2 = new Nokia.ImageDescription({
					element: '#image02',
					applyRoundedCorners: false,
					description: 'This is a simple text description. You can just pass a text as the "description" option.',
					maxLines: 1
				});
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('imagedescription', init);

		</script>

	</body>
</html>